{$layout}
{$template "menu"}

<p v-if="node == null" class="comment">暂时还没有设置集群，<a href="/settings/cluster/update">点此设置</a>。</p>
<table class="ui table definition selectable" v-if="node != null">
	<tr>
		<td class="title">当前节点ID</td>
		<td>{{node.id}}</td>
	</tr>
	<tr>
		<td>当前节点名称</td>
		<td>{{node.name}}</td>
	</tr>
	<tr>
		<td>当前节点角色</td>
		<td>
			<strong v-if="node.role == 'MASTER'">{{node.role}}</strong>
			<span style="font-style: italic" v-if="node.role != 'MASTER'">{{node.role}}</span>
		</td>
	</tr>
	<tr>
		<td>集群ID</td>
		<td>{{node.clusterId}}</td>
	</tr>
	<tr>
		<td>集群密钥</td>
		<td>{{node.clusterSecret}}</td>
	</tr>
	<tr>
		<td>集群通讯地址</td>
		<td>{{node.clusterAddr}}</td>
	</tr>
	<tr>
		<td>连接状态</td>
		<td>
			<div v-if="!node.on">
				<span class="disabled">尚未启用此节点</span>
			</div>
			<div v-if="node.on">
				<span class="green" v-if="isActive && error.length == 0">已连接</span>
				<span class="red" v-if="isActive && error.length > 0">发生错误 &nbsp; <a href="" @click.prevent="connect()" style="font-size:0.9em">[重新连接]</a>  &nbsp; {{error}}</span>
				<span class="red" v-if="!isActive">已断开 &nbsp; <a href="" @click.prevent="connect()" style="font-size:0.9em">[重新连接]</a> <var v-if="error.length > 0" style="font-style: normal;"> （原因：{{error}}）</var></span>
				<p class="comment" v-if="!isActive">自动在30秒内重新尝试连接</p>
			</div>
		</td>
	</tr>
	<tr v-if="node.on">
		<td>同步状态</td>
		<td>
			<div v-if="!isActive">
				等待连接到集群
			</div>
			<div v-if="isActive">
				<span v-if="!isChanged" class="green">已同步</span>

				<a href="" v-if="node.role == 'MASTER' && isChanged && !isSyncing" @click.prevent="sync()"><i class="icon circle tiny red"></i><span v-if="node.role == 'MASTER'">本地</span>配置已发生变更，点此同步到集群</a>
				<a href="" v-if="node.role != 'MASTER' && isChanged && !isSyncing" @click.prevent="sync()"><i class="icon circle tiny red"></i>配置已发生变更，点此从集群中同步</a>
				<span v-if="isSyncing">正在同步中...</span>
			</div>
		</td>
	</tr>
</table>